<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- h5是不区分大小写的,使用要用连字符 -->
      <mao-yan></mao-yan>
    </div>

    <script src="./Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 定义组件
      // 组件就是一个对象, 对象里面写的东西就是我们之前用的options(选项),必须要包含template(模板)选项
      // 取名规范，顾名思义，大驼峰，取名的时候不能和原生标签重名

      // 组件里面的变量或者方法等，只能在自己组件内部使用
      const MaoYanHeader = {
        data() {
          return {
            count: 3,
          };
        },
        template: `
          <header>猫眼头部 - {{ count }}</header>
        `,
      };

      const MaoYanContent = {
        template: `
          <main>猫眼内容</main>
        `,
      };

      const MaoYan = {
        template: `
          <div>
            <mao-yan-header></mao-yan-header>
            <mao-yan-content></mao-yan-content>
            <mao-yan-content></mao-yan-content>
          </div>
        `,
        components: {
          MaoYanHeader,
          MaoYanContent,
        },
      };

      // 根组件
      createApp({
        data() {
          return {
            str: "hello",
          };
        },
        // 组件需要注册的,components用于注册组件
        components: {
          MaoYan: MaoYan,
        },
      }).mount("#app");
    </script>
  </body>
</html>
